import { Box, Button, Card, Divider, Pagination, Table } from '@alifd/next';
import TableEmptyBlock from '@/components/TableEmptyBlock';
import { Link, useHistory } from 'ice';
import { FormattedDate, FormattedMessage } from 'react-intl';
import styles from './list.module.scss';

interface Props {
  pagination: any;
  tableProps: any;
  error?: Error;
  onRefresh?: () => any;
}

function List({ pagination, tableProps, error, onRefresh }: Props) {
  const history = useHistory();
  return (
    <Card.Content>
      <Table
        {...tableProps}
        isZebra
        emptyContent={<TableEmptyBlock error={error} onRefresh={onRefresh} />}
        primaryKey="shippingId"
      >
        <Table.Column dataIndex="shippingLabel" title="物流单号" asyncResizable />
        <Table.Column title="订单号" dataIndex="orderNo" asyncResizable />
        <Table.Column
          dataIndex="productName"
          title="商品信息"
          asyncResizable
          cell={(val, i, row) => (
            <div className={styles.baseinfo}>
              <img className={styles.img} src={row.mainImage} alt="商品主图" />
              <div>
                <span className={styles.title}>{val}</span>
                <div className={styles.row}>
                  <span>{`${row.brandName}/${row.categoryName}`}</span>
                  <span>{`规格:${row.attrValue || '无'}`}</span>
                </div>
              </div>
            </div>
          )}
        />
        <Table.Column
          dataIndex="toName"
          title="收件人信息"
          asyncResizable
          cell={(val, i, row) => (
            <div>
              <p>{val}</p>
              <span>{row.toTelephone}</span>
            </div>
          )}
        />

        <Table.Column title="库位编号" dataIndex="stockNo" asyncResizable />
        <Table.Column
          title="发货时间"
          dataIndex="shippingTime"
          asyncResizable
          cell={(val) => <FormattedDate value={val} />}
        />

        <Table.Column
          dataIndex="shippingId"
          title="操作"
          cell={(val, i, row) => (
            <>
              <Button
                type="primary"
                text
                onClick={() => history.push('/operationCenter/orderDetail', { shippingId: val, type: 'delivery' })}
              >
                查看
              </Button>
              <Divider direction="ver" />
              <Button type="primary" text>
                取消
              </Button>
            </>
          )}
        />
      </Table>
      <Pagination
        style={{ marginTop: 16, textAlign: 'right' }}
        shape="arrow-only"
        totalRender={(total) => <FormattedMessage id="page.total" tagName="div" values={{ total }} />}
        {...pagination}
      />
    </Card.Content>
  );
}

export default List;
